import {PieChart, Pie, ResponsiveContainer, Cell} from 'recharts';
import {STAT_COLORS} from "../../../constant";
import {QuestionRadioStatPropsType} from "./interface";
import {useMemo} from "react";

function foramt(n: number) {
    return (n * 100).toFixed(2)
}

export const StatComponent = ({stat}: QuestionRadioStatPropsType) => {
    const sum = useMemo(() => {
        let s = 0
        stat.forEach(i => {
            s += i.count;
        })
        return s

    }, [stat])
    return (
        <div style={{width: '300px', height: '400px'}}>
            <ResponsiveContainer width={'100%'} height={'100%'}>
                <PieChart>
                    <Pie dataKey={'count'} data={stat} cx={'50%'} cy={'50%'} outerRadius={50}
                         label={i => `${i.name}: ${foramt(i.count / sum)}%`}>
                        {stat.map((i, index) => (
                            <Cell key={index} fill={STAT_COLORS[index]}></Cell>
                        ))}
                    </Pie>
                </PieChart>
            </ResponsiveContainer>
        </div>
    );
};